<template>
  <article class="card fade-in" @click="open" :style="{ animationDelay: `${animationDelay}ms` }">
    <div class="thumb-wrapper">
      <div class="thumb">
        <img :src="video.thumbnail" :alt="video.title" loading="lazy" class="thumb-img" />
        <span class="duration">{{ video.duration }}</span>
        <div class="hover-overlay">
          <div class="play-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polygon points="5 3 19 12 5 21 5 3"></polygon>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <h3 class="title">{{ video.title }}</h3>
    <div class="meta">
      <div class="author">
        <span class="author-name">{{ video.author }}</span>
      </div>
      <div class="stats">
        <span>{{ toWan(video.plays) }} 次观看</span>
        <span class="bullet">•</span>
        <span>{{ toWan(video.danmaku) }} 弹幕</span>
      </div>
    </div>
  </article>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const props = defineProps({
  video: { type: Object, required: true },
  index: { type: Number, default: 0 }
})

const router = useRouter()
const open = () => router.push(`/watch/${props.video.id}`)

const toWan = (n) => {
  if (n >= 10000) return (n / 10000).toFixed(1).replace(/\.0$/, '') + '万'
  return n.toLocaleString()
}

// 计算动画延迟，让卡片逐个出现
const animationDelay = computed(() => {
  return Math.min(props.index * 50, 300)
})
</script>

<style scoped>
.card {
  cursor: pointer;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  will-change: transform;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

/* 视频缩略图容器 */
.thumb-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin: 6px;
  aspect-ratio: 16 / 9;
}

.thumb {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .thumb-img {
  transform: scale(1.08);
}

/* 播放时长标签 */
.duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  z-index: 10;
  backdrop-filter: blur(2px);
}

/* 悬停时的播放按钮覆盖层 */
.hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2) 30%, transparent);
  opacity: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover .hover-overlay {
  opacity: 1;
}

.play-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.7);
}

.card:hover .play-icon {
  transform: scale(1);
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.9), var(--glow);
}

.play-icon svg {
  margin-left: 3px;
}

/* 视频标题 */
.title {
  margin: 10px 12px 6px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.card:hover .title {
  color: var(--accent);
}

/* 视频元信息 */
.meta {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-name {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  transition: color 0.2s ease;
}

.card:hover .author-name {
  color: var(--accent-hover);
}

.stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.bullet {
  font-size: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card:hover {
    transform: translateY(-4px);
  }
  
  .play-icon {
    width: 50px;
    height: 50px;
  }
}
</style>